<template>
    <el-container class="common-layout">
        <el-menu
            active-text-color="#ffd04b"
            background-color="#79bbff"
            text-color="#fff"
            default-active="/freePlanetIndex"
            class="el-menu-vertical-demo"
            :collapse="!menuCollapse"
            @open="handleOpen"
            @close="handleClose"
            collapse-transition
            router
        >
            <el-switch
                v-model="menuCollapse"
                class="ml-2"
                inline-prompt
                active-text="收起"
                inactive-text="展开"
                @change="switchChange"
            />
            <el-sub-menu v-for="(menu,index) in menuList" :key="index" :index="JSON.stringify(menu.menuSort)">
                <template #title>
                    <el-icon><component :is="menu.menuIcon"/></el-icon>
                    <span>{{menu.menuName}}</span>       
                </template>
                <el-menu-item-group v-if="menu.childMenus.length > 0">
                    <el-menu-item v-for="child in menu.childMenus" :key="child.menuId" :index="child.skipPath">
                        <el-icon><component :is="child.menuIcon"/></el-icon>
                        {{child.menuName}}
                    </el-menu-item>
                </el-menu-item-group>
            </el-sub-menu>
            <el-button class="menu-btn" type="primary" @click="backIndex">回 到 首 页</el-button>
        </el-menu>
        <el-container style="width: 100%">
            <el-main class="main-layout">
                <router-view/>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
import { getCurrentInstance, ref, reactive,onMounted} from 'vue';
import PlanetHeader from '@/components/PlanetHeader.vue';
import { gatewayPrefix, userMiddleContextPath} from '@/utils/commConstance'
import { $http } from "@/utils/axios";
import router from '@/router';
import { ElMessage } from 'element-plus';
export default {
    setup(){
        let menuCollapse = ref(true)
        const currentRoleId = ref()
        const menuList = ref([])

        const switchChange = (value)=>{
            menuCollapse.value = value
        }

        const handleOpen = ()=>{ }
        const handleClose = ()=>{ }

        onMounted(()=>{
            currentRoleId.value=sessionStorage.getItem("currentRole")
            if(currentRoleId.value !== undefined && currentRoleId.value !== null && currentRoleId.value !== ''){
                getMenusByRoleId()
            }else{
                // ElMessage.error('获取账号角色信息错误,请联系管理员!!!')
            }  
        })

        // 根据角色id获取菜单信息
        const getMenusByRoleId = ()=>{
            let roleId = currentRoleId.value
            $http.get(`${gatewayPrefix}/${userMiddleContextPath}/planetMenus/getMenuInfoByRoleId/${roleId}`).then((res)=>{
                menuList.value = res.menus
            })
        }
        // 回到首页
        const backIndex = ()=>{
            router.push('/')
        }
        
        return {
            menuCollapse,
            handleOpen,
            handleClose,
            switchChange,
            menuList,
            backIndex
        }
    }

}
</script>

<style src="../assets/css/planetIndex.css" scoped></style>